<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品等级管理</title>
    <script src="../../js/vue.js"></script>
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <script src="../../js/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
        .el-table .el-table__fixed-right {
            height: 100% !important;
        }
        .el-row {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div id="app" class="app1">
    <!--搜索功能-->
    <el-row>
        <el-col :span="6">
            <el-input size="mini" v-model="searchForm.gradeName" placeholder="等级名称"></el-input>
        </el-col>
        <el-col :span="6">
            <el-select size="mini" v-model="searchForm.status" placeholder="状态" clearable>
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
            </el-select>
        </el-col>
        <el-col :span="12">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            &nbsp;&nbsp;
            <el-button size="mini" type="primary" @click="handleAdd">添加</el-button>
        </el-col>
    </el-row>

    <!--列表-->
    <el-table :data="tableData" style="width: 100%" height="500" border>
        <el-table-column prop="gradeId" label="等级ID" width="100"></el-table-column>
        <el-table-column prop="gradeName" label="等级名称" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                    {{ scope.row.status === '0' ? '正常' : '停用' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="delFlag" label="删除标志" width="100">
            <template slot-scope="scope">
                <el-tag :type="scope.row.delFlag === '0' ? 'success' : 'danger'">
                    {{ scope.row.delFlag === '0' ? '存在' : '删除' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建者" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
            <template slot-scope="scope">
                {{ scope.row.createTime ? scope.row.createTime.replace('T', ' ').substring(0, 19) : '' }}
            </template>
        </el-table-column>
        <el-table-column prop="updateBy" label="更新者" width="120"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160">
            <template slot-scope="scope">
                {{ scope.row.updateTime ? scope.row.updateTime.replace('T', ' ').substring(0, 19) : '' }}
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button size="mini" :type="scope.row.status === '0' ? 'warning' : 'success'"
                           @click="handleChangeStatus(scope.$index, scope.row)">
                    {{ scope.row.status === '0' ? '停用' : '启用' }}
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--添加/更新对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="等级名称" prop="gradeName">
                <el-input v-model="form.gradeName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" style="width: 100%">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="停用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" autocomplete="off" :rows="3"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [], // 表格数据
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示的条数
                total: 0, // 分页数据的总数
                searchForm: {}, // 搜索条件
                title: '添加等级', // 对话框标题
                dialogFormVisible: false, // 对话框是否可见

                form: {
                    gradeId: '',
                    gradeName: '',
                    status: '0',
                    delFlag: '0',
                    createBy: '',
                    createTime: '',
                    updateBy: '',
                    updateTime: '',
                    remark: ''
                },
                rules: {
                    gradeName: [
                        { required: true, message: '请输入等级名称', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ]
                }
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            // 加载等级数据
            loadData() {
                let _this = this;
                axios.post('/vegetablemarketexpress/grade/listByPage', {
                    "pageNo": this.currentPage,
                    "pageSize": this.pageSize,
                    "data": this.searchForm
                }).then(function (response) {
                    if (response.data.code==200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total;
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error('数据加载失败');
                });
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            search() {
                this.currentPage = 1;
                this.loadData();
            },
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let uri = '/vegetablemarketexpress/grade/add';
                        if (this.title == '修改等级') {
                            uri = '/vegetablemarketexpress/grade/edit';
                        }

                        let _this = this;
                        let submitForm = JSON.parse(JSON.stringify(this.form));

                        axios.post(uri, submitForm)
                            .then(function (response) {
                                if (response.data.code==200) {
                                    _this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    });
                                    _this.loadData();
                                    _this.dialogFormVisible = false;
                                } else {
                                    _this.$message.error('操作失败');
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                                _this.$message.error('操作异常');
                            });
                    } else {
                        this.$message.error('表单验证失败');
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleAdd() {
                this.dialogFormVisible = true;
                this.title = "添加等级";
                this.form = {
                    gradeId: '',
                    gradeName: '',
                    status: '0',
                    delFlag: '0',
                    createBy: '',
                    createTime: '',
                    updateBy: '',
                    updateTime: '',
                    remark: ''
                };
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true;
                this.title = "修改等级";
                this.form = JSON.parse(JSON.stringify(row));
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该等级, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this;
                    axios.delete('/vegetablemarketexpress/grade/' + row.gradeId)
                        .then(function (response) {
                            if (response.data.code==200) {
                                _this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                _this.loadData();
                            } else {
                                _this.$message.error('删除失败');
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('删除异常');
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleChangeStatus(index, row) {
                let _this = this;
                let status = row.status === '0' ? '1' : '0';
                axios.put('/vegetablemarketexpress/grade/changeStatus', {
                    gradeId: row.gradeId,
                    status: status
                }).then(function (response) {
                    if (response.data.code==200) {
                        _this.$message({
                            message: '状态更新成功',
                            type: 'success'
                        });
                        _this.loadData();
                    } else {
                        _this.$message.error('状态更新失败');
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error('状态更新异常');
                });
            }
        }
    });
</script>
</body>
</html>
